<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link href="https://cdn.bootcss.com/font-awesome/5.8.0/css/all.css" rel="stylesheet">
	<style>

	*{
		box-sizing: border-box;
		margin: 0;

	}

		.close{
			position: absolute;
			float: right;
			top: 30px;
			right: 30px;
			font-size: 50px;
			transition: transform 1s;
		}
		.close:hover{
			transform: rotate(270deg);
		}
		.box{
			top: 10vh;
			position: absolute;
			color:#668b3ba3;
			height: 80vh;
			width: 90vw;
			left: -100vw;
			z-index: 1;
			transition: left 2s;
			opacity: 1;
			box-shadow: 6px 12px 27px #847f7f;
		}
		.show{
			background: #f7f6de;
			text-align: center;
			font-size: 30px;
			color:#668b3ba3;
			height: 80vh;
			width: 90vw;
			overflow: scroll;
		}
	.el-base {
		position: absolute;
		top: 40%;
		left: 50%;
		width: 80vw;
		background: #eac353;
		border-radius: 15px;
		transform: translateX(-50%) translateY(-50%);
		box-shadow: 1px 2px 10px 12px #464344;
	}
	.el-inner-space {
		border-radius: 15px;
		border-top: solid 20vw transparent;
		border-right: solid 40vw #f7f6de;
		border-bottom: solid 20vw #f7f6de;
		border-left: solid 40vw #f7f6de;
		height: 0;
		width: 0;

	}
	.el-flap {
		position: absolute;
		border-radius: 15px;
		top:0;
		left: 0;
		border-top: solid 20vw cornflowerblue;
		border-right: solid 40vw transparent;
		border-bottom: solid 20vw transparent;
		border-left: solid 40vw transparent;
		height: 0;
		width: 0;
		animation: el-open 2.5s ;


	}


	@keyframes el-open {
		0% {
			border-top: solid 20vw #3292e0;
			transform: rotateX(0deg);
			transform-origin: center top;
		}
		100% {
			border-top: solid 20vw #fad662;
			transform: rotateX(180deg);
			transform-origin: center top;
		}
	}
	.nav{
		position: absolute;
		width: 100%;
		height: 100px;
		border: 1px solid blueviolet;
		bottom: 0;
	}
	.li{
		display: inline-block;
		width: 33%;
		text-align: center;
		line-height: 100px;
	}
	</style>
<body id="body">

<div class="box" id="box">
	<div id="showStr" class="show">
	</div>
	<span class="close" onclick="quit()"> <i class="fa fa-times" aria-hidden="true"></i> </span>
</div>
<div style="display:none" id="string">
	从小我就懂得保护自己，
	我知道要想不被人拒绝，
	最好的办法就是先拒绝别人。
	----
	从什么时候开始，
	在什么东西上面都有个日期，
	秋刀鱼会过期，
	肉罐头会过期，
	连保鲜纸都会过期，
	我开始怀疑，
	在这个世界上，
	还有什么东西是不会过期的
	----
	虽然我很喜欢她，
	但始终没有告诉她。
	因为我知道得不到的东西永远是最好的
	----
	我曾经听人说过，
	当你不可以再拥有的时候。
	你唯一可以做的，
	就是让自己不要忘记。
	----
	其实要过那条马路并不难。
	就看谁在对面等你。
	----
	我终于来到瀑布，
	我突然想起何宝荣，
	我觉得好难过，
	我始终认为站在这儿的应该是两个人。
	----

</div>

<div class="el-base" id="mail">
	<div class="el-inner-space">
		<div class="el-flap"></div>
		<div class="open" onclick="f()"> <i class="fa fa-angle-double-up" aria-hidden="true"></i><br>
			开 启</div>
	</div>

</div>

<nav class="nav">
	<div class="li">1</div>
	<div class="li">2</div>
	<div class="li">3</div>
</nav>
<script>
	const width_ = window.screen.width;
	const body= document.getElementById('body'),
			mail =  document.getElementById('mail');
	var show = document.getElementById('box');
	console.log(body);
	function f() {
		var timer = null;
		var index = 0;

		var str = document.getElementById("string").innerHTML;
		show.style.left = width_ * 0.1 +'px';
		body.removeChild(mail);
		setTimeout(function () {
			function type() {
				if (index == str.length) {
					//index = 0;
					clearInterval(timer)
				}
				document.getElementById("showStr").innerText = str.substring(0, index++) + "_";
			}
			timer = setInterval(type, 200);

		},3000);
		 //通过定时器来让文字逐步显示

	}
	function quit() {
		var op =1;
		function out() {
			if(show.style.opacity <0){
				body.removeChild(show);
				body.removeChild(show)
			}
			else {
				show.style.opacity = op;
				op -= 0.1;
			}

		}
		setInterval(out, 100)


	}



</script>
</body>
</html>
